Fixes #38107 - Booted container images page #11269

ianballou · 2024-12-19T19:11:31Z

What are the changes introduced in this pull request?

Adds the "Booted container images" page. In the future it'll likely change to be the "Containers" page and merge with the new container images UI.

Within the page, there is a table that shows an overview of booted container images used by bootc hosts. The table shows the image name, number of digests within, and the number of hosts using that container image:

The last functionality-TODO is to make the rows expand and show the actual digests within. I also need to write tests.

Considerations taken when implementing this change?

I decided to use the newer TableIndexPage from Foreman since it's the new goodness.

This PR is built on top of #11257.

What are the testing steps for this pull request?

Create hosts that have bootc attributes, ideally enough to test the counting and pagination
Try everything the new page has to offer, including the hyperlinks

ianballou · 2024-12-19T21:28:54Z

It looks like I can't use the Foreman React Table component due to the expandable rows. That component sticks children inside a Tbody, but I need to create one Tbody elements for each expandable row.

Tbody elements cannot go inside another Tbody.

sjha4 · 2024-12-20T19:22:53Z

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

+const BootedContainerImagesPage = () => {
+  const columns = {
+    image_name: {
+      title: __('Image name'),


Can we change this to Bootc - booted image name so it's also easier to figure out the serach query?

I changed all of the references to image_name to bootc_booted_image like in the API.

sjha4 · 2024-12-20T19:27:09Z

So we don't forget after the break, the bookmarks controller needs some love on the page to work..

ianballou · 2024-12-23T16:55:20Z

Sorting support is in!

ianballou

I've fixed bookmarks and tidied up some things.
Empty state is still broken and I'm a little confused, and the table doesn't match the mock-up perfectly. Details below:

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

ianballou · 2025-01-10T22:02:13Z

Current state:

sjha4 · 2025-01-14T21:33:47Z

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

+            );
+          })}
+        </TableComposable>
+        {results.length > 0 && !errorMessage && bottomPagination}


More readable to not have bottomPagination and render the Pagination component directly here.

ianballou · 2025-01-15T20:09:40Z

I just pushed a fix for the rows all expanding at once.

lib/katello/plugin.rb

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

webpack/scenes/BootedContainerImages/__tests__/bootedContainerImagesPage.test.js

ianballou · 2025-01-16T22:28:20Z

Empty state is fixed, the nav capitalization is fixed, and I made some more testing progress.

sjha4 · 2025-01-21T21:34:28Z

Code looks good to me..Functionally it is working great..Pagination, bookmarking, searches, empty states etc work good on the page. I'll play some more and let @jeremylenz take a final look at the code in the meantime..

jeremylenz

Just one, uh, query but code is looking good to me!

app/lib/katello/concerns/bookmark_controller_validator_extensions.rb

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

sjha4

I am happy with this PR so I'll leave my ack..Feel free to merge when all the other discussions are resolved to @jeremylenz 's satisfaction. 😸

sjha4 · 2025-01-22T17:53:14Z

I haven't tested on top of PF5 changes cause I was using a different environment for this one so be aware somethings may need to change when we switch to PF5.. @MariaAga 👀

jeremylenz · 2025-01-22T17:59:03Z

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

+    hosts: {
+      title: __('Hosts'),
+      wrapper: ({ bootc_booted_image: bootcBootedImage, digests }) => (
+        <a href={`/hosts?search=bootc_booted_image%20=%20${bootcBootedImage}`}>{digests.reduce((total, digest) => total + digest.host_count, 0)}</a>


This needs to respect the "New host overview page" Setting. Right now it always goes to the old hosts list page.

Ah good catch, I remember seeing this

In fact I think I hit it during the community demo :)

jeremylenz

Works well now!

Thanks @ianballou

ACK 👍

jeremylenz · 2025-01-22T19:44:19Z

err, I mean.. APGHA

looks like the tests need fixing now

ianballou · 2025-01-22T19:44:45Z

Looks like using that setting broke the tests.

jeremylenz · 2025-01-22T21:10:40Z

🍏

pr-processor bot added the Not yet reviewed label Dec 19, 2024

ianballou marked this pull request as draft December 20, 2024 15:08

ianballou force-pushed the 38107-bootc-images-page branch from ef686fc to d861aea Compare December 20, 2024 18:05

sjha4 reviewed Dec 20, 2024

View reviewed changes

pr-processor bot removed the Not yet reviewed label Dec 20, 2024

ianballou force-pushed the 38107-bootc-images-page branch 3 times, most recently from 85536ed to 7ac103d Compare December 23, 2024 16:54

ianballou marked this pull request as ready for review January 6, 2025 16:34

ianballou force-pushed the 38107-bootc-images-page branch 2 times, most recently from f634101 to 5c0f7d4 Compare January 10, 2025 21:49

ianballou commented Jan 10, 2025

View reviewed changes

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js Show resolved Hide resolved

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js Outdated Show resolved Hide resolved

ianballou force-pushed the 38107-bootc-images-page branch from 5c0f7d4 to 5af40f2 Compare January 10, 2025 21:54

sjha4 reviewed Jan 14, 2025

View reviewed changes

ianballou force-pushed the 38107-bootc-images-page branch 2 times, most recently from 654bb12 to 9b2397c Compare January 15, 2025 20:09

jeremylenz reviewed Jan 15, 2025

View reviewed changes

lib/katello/plugin.rb Outdated Show resolved Hide resolved

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js Outdated Show resolved Hide resolved

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js Show resolved Hide resolved

ianballou commented Jan 15, 2025

View reviewed changes

webpack/scenes/BootedContainerImages/__tests__/bootedContainerImagesPage.test.js Show resolved Hide resolved

ianballou force-pushed the 38107-bootc-images-page branch 4 times, most recently from 81dfd4d to 68d69da Compare January 21, 2025 19:59

jeremylenz reviewed Jan 21, 2025

View reviewed changes

app/lib/katello/concerns/bookmark_controller_validator_extensions.rb Show resolved Hide resolved

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js Show resolved Hide resolved

sjha4 approved these changes Jan 22, 2025

View reviewed changes

jeremylenz requested changes Jan 22, 2025

View reviewed changes

pr-processor bot added the Waiting on contributor label Jan 22, 2025

ianballou added 8 commits January 22, 2025 19:12

Fixes #38107 - add booted container images page

07a995c

Refs #38107 - use Table on bootc images page

695cee4

Refs #38107 - add digests + hosts columns to bootc containers page

1748101

Refs #38107 - Make booted container images rows expandable

c398a39

Refs #38107 - sorting on booted container images page

0cb7c52

Refs #38107 - fix bootc bookmarks + adjust table format

1060ca9

Refs #38107 - fix all rows expanding issue

0deaf3c

Refs #38107 - add test for BootedContainerImagesPage

6928bdf

ianballou force-pushed the 38107-bootc-images-page branch from 68d69da to 7edac87 Compare January 22, 2025 19:36

pr-processor bot added Needs re-review and removed Waiting on contributor Needs re-review labels Jan 22, 2025

jeremylenz approved these changes Jan 22, 2025

View reviewed changes

Refs #38107 - fix empty state, fix page caps, do more testing

749a5e0

ianballou force-pushed the 38107-bootc-images-page branch from 7edac87 to 749a5e0 Compare January 22, 2025 19:50

ianballou merged commit 775218f into Katello:master Jan 22, 2025
18 of 19 checks passed

ianballou deleted the 38107-bootc-images-page branch January 22, 2025 21:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes #38107 - Booted container images page #11269

Fixes #38107 - Booted container images page #11269

ianballou commented Dec 19, 2024

ianballou commented Dec 19, 2024

sjha4 Dec 20, 2024

ianballou Dec 23, 2024

sjha4 commented Dec 20, 2024

ianballou commented Dec 23, 2024

ianballou left a comment

ianballou commented Jan 10, 2025

sjha4 Jan 14, 2025

ianballou Jan 15, 2025

ianballou commented Jan 15, 2025

ianballou commented Jan 16, 2025

sjha4 commented Jan 21, 2025

jeremylenz left a comment

sjha4 left a comment

sjha4 commented Jan 22, 2025

jeremylenz Jan 22, 2025

ianballou Jan 22, 2025

ianballou Jan 22, 2025

ianballou Jan 22, 2025

jeremylenz left a comment

jeremylenz commented Jan 22, 2025

ianballou commented Jan 22, 2025

jeremylenz commented Jan 22, 2025

Fixes #38107 - Booted container images page #11269

Fixes #38107 - Booted container images page #11269

Conversation

ianballou commented Dec 19, 2024

What are the changes introduced in this pull request?

Considerations taken when implementing this change?

What are the testing steps for this pull request?

ianballou commented Dec 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sjha4 commented Dec 20, 2024

ianballou commented Dec 23, 2024

ianballou left a comment

Choose a reason for hiding this comment

ianballou commented Jan 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ianballou commented Jan 15, 2025

ianballou commented Jan 16, 2025

sjha4 commented Jan 21, 2025

jeremylenz left a comment

Choose a reason for hiding this comment

sjha4 left a comment

Choose a reason for hiding this comment

sjha4 commented Jan 22, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeremylenz left a comment

Choose a reason for hiding this comment

jeremylenz commented Jan 22, 2025

ianballou commented Jan 22, 2025

jeremylenz commented Jan 22, 2025